<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- 先引入react,再引入react-dom,因为react是核心库，react-dom是扩展库 -->
<!-- 引入以后全局多了一个REACT和ReactDOM对象 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>
<!-- 此处一定要写babel，不写就是默认js -->
<script type="text/babel">

class Count extends React.Component {

  constructor(props) {
    console.log('Count-constructor');
    super(props)
    this.state = {count:0}
  }
  add = () => {
    const {count} = this.state
    this.setState({count:count+1})
  }

  death = () => {
    ReactDom.unmountComponentAtNode(document.getElementById('example'))
  }

  force = () => {
    this.forceUpdate()
  }

  // 组件将要挂载前执行
  componentWillMount(){
    console.log('Count---componentWillMount');
  }

  componentDidMount(){
    console.log('Count---componentDidMount');
  }

   // 组件将要卸载
   componentWillUnmount(){
    console.log('Count---componentWillUnmount');
   }

   // 不写默认返回true，写了你就要写返回值，否则会报警告(控制组件更新的阀门，false不允许更新状态)
   shouldComponentUpdate(){
    console.log('Count---shouldComponentUpdate');
    return true
   }
   // 组件将要更新的钩子
   componentWillUpdate(){
    console.log('Count---componentWillUpdate');
   }

   componentDidUpdate(){
    console.log('Count---componentDidUpdate');
  }


  render(){
    console.log('Count---render');
    const {count} = this.state
    return (
      <div>
        <h2>当前求和为：{count}</h2>
        <button onClick={this.add}>点我加1</button>
        <button onClick={this.death}>卸载组件</button>
        <button onClick={this.force}>不更改任何状态的数据，强制更新一下</button>
      </div>
    )
  }
}

class A extends React.Component {

  state = {carName:'奔驰'}
  
  changeCar = () => {
    this.setState({carName:"奥托"})
  }
  // setState会导致B组件也重新渲染
  render(){
    return(
      <div>
        <div>A</div>
        <button onClick={this.changeCar}>换车</button>
        <B  carName={this.state.carName}/>
      </div>
    )
  }
}

class B extends React.Component {
  // 第一次不算，第二次接收新的props才会调用它，所以初始化加载B组件的时候不会渲染它
  componentWillReceiveProps(){
    console.log('B--componentWillReceiveProps');
  }
  render(){
    return(
      <div>
        <div>我是b组件，接收到的车是:{this.props.carName}</div>
      </div>
    )
  }
}



ReactDOM.render(
	<A/>,
	document.getElementById('example')
);

</script>

</body>
</html>